<script setup>
// 通过defineProps 接收子组件容器传递的数据
defineProps({
  // 名为title的属性
  title: {
    // required: true表示该属性是必需的，类型应该是字符串
    required: true,
    type: String
  }
})
</script>
<template>
    <el-card class="page-container">
      <!-- card中通过#header提供头部部分--已封装具名插槽 -->
      <template #header>
        <div class="header">
          <!-- 标题 -->
          <span>{{title}}</span>
          <!-- 右边按钮 -->
          <div class="extra">
            <slot name="extra"></slot>
          </div>
        </div>
      </template>
      <!-- 默认部分 -->
       <slot></slot>
    </el-card>
  </template>
  
  <style lang="scss" scoped>
  .page-container {
    min-height: 100%;
    box-sizing: border-box;
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  </style>